<template>
  <view class="container">
    <!-- 顶部标题栏 -->
    <view class="header">
      <view class="title">
        聊天
        <!-- <text class="unread-count" v-if="totalUnreadCount > 0"
          >({{ totalUnreadCount }})</text
        > -->
      </view>
    </view>

    <!-- 浮动的聊天室入口 (当原始入口不可见时显示) -->
    <view
      class="floating-chatroom"
      :class="{ 'show-floating': showFloatingChatroom }"
      @click="goToChatroom"
    >
      <view class="avatar-container">
        <image
          class="avatar"
          src="/static/fishPiLogo.png"
          mode="aspectFill"
        ></image>
      </view>
      <view class="message-info">
        <view class="name-area">
          <text class="name">聊天室</text>
          <text class="online-info">多人在线</text>
        </view>
        <view class="message-preview-container">
          <text v-if="latestChatMessage" class="message-preview-text">{{
            latestChatMessage.userName +
            ":" +
            formatPreview(latestChatMessage.content)
          }}</text>
          <text v-else class="message-preview-text"
            >和社区鱼友一起摸鱼聊天</text
          >
        </view>
      </view>
      <view class="time-container">
        <text class="time" v-if="latestChatMessage">{{
          formatTime(latestChatMessage.time)
        }}</text>
        <text class="time" v-else>实时</text>
      </view>
    </view>

    <!-- 消息列表 -->
    <scroll-view
      scroll-y
      class="message-list"
      @scrolltolower="loadMore"
      @scroll="onScroll"
      :scroll-top="scrollTop"
      scroll-with-animation
      refresher-enabled
      :refresher-triggered="isRefreshing"
      @refresherrefresh="onRefresh"
    >
      <!-- 聊天室入口 -->
      <view ref="chatroomEntry" class="chatroom-entry" @click="goToChatroom">
        <view class="avatar-container">
          <image
            class="avatar"
            src="/static/fishPiLogo.png"
            mode="aspectFill"
          ></image>
        </view>
        <view class="message-info">
          <view class="name-area">
            <text class="name">聊天室</text>
            <text class="online-info">多人在线</text>
          </view>
          <view class="message-preview-container">
            <text v-if="latestChatMessage" class="message-preview-text">{{
              latestChatMessage.userName +
              ":" +
              formatPreview(latestChatMessage.content)
            }}</text>
            <text v-else class="message-preview-text"
              >和社区鱼友一起摸鱼聊天</text
            >
          </view>
        </view>
        <view class="time-container">
          <text class="time" v-if="latestChatMessage">{{
            formatTime(latestChatMessage.time)
          }}</text>
          <text class="time" v-else>实时</text>
        </view>
      </view>

      <!-- 分割线 -->
      <view class="divider"></view>

      <!-- 私信列表 -->
      <view class="section-title">
        <text>私信消息</text>
      </view>

      <view class="empty-list" v-if="messages.length === 0 && !loading">
        <text>暂无私信消息</text>
      </view>

      <view class="loading" v-if="loading">
        <text>加载中...</text>
      </view>

      <view
        v-for="(message, index) in messages"
        :key="message.oId"
        class="message-item"
        @click="goToChatDetail(message)"
      >
        <view class="avatar-container">
          <image
            class="avatar"
            :src="message.receiverAvatar"
            mode="aspectFill"
          ></image>
          <!-- 添加未读标记红点 -->
          <view class="unread-dot" v-if="message.hasUnread"></view>
        </view>
        <view class="message-info">
          <view class="name-area">
            <text class="name">{{ message.receiverUserName }}</text>
            <text class="online-info" v-if="message.receiverOnlineFlag == true">
              在线
            </text>
            <text class="device-info" v-else>离线</text>
          </view>
          <view class="message-preview-container">
            <text class="sender-prefix" v-if="isSelfSender(message)">我: </text>
            <text class="message-preview-text">{{
              formatPreview(message.preview)
            }}</text>
          </view>
        </view>
        <view class="time-container">
          <text class="time">{{ formatTime(message.time) }}</text>
          <!-- 添加未读数量徽标 -->
          <view class="badge" v-if="message.hasUnread">{{
            message.unreadCount > 0 ? message.unreadCount : "新"
          }}</view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, onMounted, onUnmounted, onBeforeUnmount } from "vue";
import api from "@/api";
import { onShow, onHide } from "@dcloudio/uni-app";
import { isLoggedIn, getApiKey } from "@/api/request";
import {
  formatDate,
  timeAgo,
  showLoading,
  hideLoading,
  showError,
} from "@/utils/common.js";

// 消息列表数据
const messages = ref([]);
// 当前用户信息
const currentUser = ref(null);
// 加载状态
const loading = ref(false);
// 是否还有更多消息
const hasMore = ref(true);
// 聊天室最新消息
const latestChatMessage = ref(null);
// 消息页码
const page = ref(1);
// 是否显示浮动聊天室
const showFloatingChatroom = ref(false);
// 聊天室入口DOM引用
const chatroomEntry = ref(null);
// 滚动位置
const scrollTop = ref(0);
// 聊天室入口位置信息
const chatroomEntryPosition = ref(null);
// 下拉刷新状态
const isRefreshing = ref(false);
// 未读消息列表
const unreadUsers = ref([]);
// 总未读消息数量
const totalUnreadCount = ref(0);
// WebSocket连接
const socketTask = ref(null);
const isConnected = ref(false);
const reconnectTimer = ref(null);
const reconnectCount = ref(0);
const MAX_RECONNECT_COUNT = 5;
const RECONNECT_DELAY = 5000;
// 页面是否可见
const isPageVisible = ref(true);
// 添加连接状态标志
const isConnecting = ref(false);

// 消息处理状态 - 使用模块级变量替代window._processedMessages
const _processedMessages = [];
// 记录最近处理的消息，用于更精确的去重
const _lastProcessedMessage = {
  content: null,
  time: 0,
};

// 组件挂载时设置定时检查页面状态
let pageStateCheckInterval = null;
let wasMessageListActive = true; // 跟踪消息列表页面的上一个状态

// 初始化页面
onMounted(() => {
  loadCurrentUser();
  // 通过loadMessages同时获取消息列表和未读状态
  loadMessages();
  loadChatroomMessages();
  // 移除重复的checkUnreadMessages调用
  // checkUnreadMessages();

  // 延迟获取聊天室入口位置信息
  setTimeout(() => {
    getChatroomEntryPosition();
  }, 500);

  // 延迟建立WebSocket连接，确保页面完全加载
  setTimeout(() => {
    connectWebSocket();
  }, 1000);

  // 定时检查页面状态
  pageStateCheckInterval = setInterval(() => {
    const pages = getCurrentPages();
    const currentPage = pages[pages.length - 1];
    const isMessageListActive =
      currentPage && currentPage.route === "pages/chat/message-list";

    // 如果当前页面不是消息列表页面，关闭连接
    if (!isMessageListActive) {
      if (wasMessageListActive) {
        console.log("已离开消息列表页面，关闭WebSocket连接");
        isPageVisible.value = false;
        closeWebSocketConnection();
        wasMessageListActive = false;
      }
    } else if (!wasMessageListActive) {
      // 如果之前不是消息列表页面，现在是，说明是返回了消息列表页面
      console.log("返回消息列表页面，重新连接WebSocket");
      isPageVisible.value = true;
      if (!isConnected.value && reconnectCount.value < MAX_RECONNECT_COUNT) {
        connectWebSocket();
      }
      wasMessageListActive = true;
    }
  }, 1000); // 每1秒检查一次，响应更快
});

// 页面卸载前清理资源
onBeforeUnmount(() => {
  console.log("组件即将卸载，关闭连接");
  isPageVisible.value = false;
  if (pageStateCheckInterval) {
    clearInterval(pageStateCheckInterval);
    pageStateCheckInterval = null;
  }
});

// 页面卸载时关闭WebSocket
onUnmounted(() => {
  console.log("组件卸载，确保关闭连接");

  // 确保安全地移除所有事件监听和清理资源
  closeWebSocketConnection();

  // 重置状态
  reconnectCount.value = 0;
  isConnected.value = false;
});

// 页面隐藏时关闭WebSocket
onHide(() => {
  console.log("页面隐藏，关闭WebSocket连接");
  isPageVisible.value = false;
  closeWebSocketConnection();
});

// 页面显示时重新连接WebSocket
onShow(() => {
  isPageVisible.value = true;

  // 避免重复请求，仅在初次加载或特定条件下刷新数据
  if (!messages.value.length) {
    loadMessages(); // 此方法内部已经包含了checkUnreadMessages
    loadChatroomMessages();
  }

  // 仅在WebSocket未连接时建立连接
  if (!isConnected.value && !socketTask.value) {
    setTimeout(() => {
      connectWebSocket();
    }, 1000);
  }

  // 延迟获取聊天室入口位置信息
  setTimeout(() => {
    getChatroomEntryPosition();
  }, 500);
});

// 建立WebSocket连接
const connectWebSocket = () => {
  // 如果页面不可见，不建立连接
  if (!isPageVisible.value) {
    console.log("页面不可见，不建立WebSocket连接");
    return;
  }

  // 如果正在连接中，不重复建立连接
  if (isConnecting.value) {
    console.log("WebSocket连接正在建立中，跳过重复连接");
    return;
  }

  // 如果已经连接，不重复建立连接
  if (isConnected.value && socketTask.value) {
    console.log("WebSocket已连接，跳过重复连接");
    return;
  }

  // 如果已经存在连接，先关闭
  if (socketTask.value) {
    try {
      socketTask.value.close({
        success: () => {
          console.log("关闭旧连接成功");
        },
        fail: (err) => {
          console.error("关闭旧连接失败:", err);
        },
        complete: () => {
          socketTask.value = null;
          // 确保连接状态标志重置
          isConnected.value = false;
        },
      });
    } catch (error) {
      console.error("关闭旧连接出错:", error);
      socketTask.value = null;
      isConnected.value = false;
    }
  }

  // 检查登录状态
  const apiKey = getApiKey();
  if (!isLoggedIn() || !apiKey) {
    console.log("未登录，不建立WebSocket连接");
    return;
  }

  // 如果达到最大重连次数，停止尝试
  if (reconnectCount.value >= MAX_RECONNECT_COUNT) {
    console.log("达到最大重连次数，停止重连");
    return;
  }

  // 标记为正在连接
  isConnecting.value = true;

  try {
    // 构建带有认证信息的WebSocket URL
    const wsUrl = `wss://fishpi.cn/user-channel?apiKey=${encodeURIComponent(
      apiKey
    )}`;
    console.log("准备连接到WebSocket - 当前时间:", new Date().toISOString());

    // 建立新连接
    socketTask.value = uni.connectSocket({
      url: wsUrl,
      success: () => {
        console.log("WebSocket连接已创建");
      },
      fail: (err) => {
        console.error("WebSocket连接创建失败:", err);
        handleWebSocketError(err);
        isConnecting.value = false; // 连接失败，重置连接中状态
      },
      complete: () => {
        // 连接请求已完成，但可能尚未建立，不在这里重置isConnecting
      },
    });

    // 监听WebSocket连接打开
    socketTask.value.onOpen(() => {
      console.log("WebSocket连接已打开 - 当前时间:", new Date().toISOString());
      isConnected.value = true;
      isConnecting.value = false; // 连接成功，重置连接中状态
      reconnectCount.value = 0; // 重置重连次数
      if (reconnectTimer.value) {
        clearTimeout(reconnectTimer.value);
        reconnectTimer.value = null;
      }
    });

    // 监听WebSocket接收消息
    socketTask.value.onMessage((res) => {
      console.log("收到WebSocket消息 - 时间:", new Date().toISOString());
      try {
        // 如果页面不可见，忽略收到的消息
        if (!isPageVisible.value) {
          console.log("页面不可见，忽略收到的消息");
          return;
        }

        if (!res.data) {
          console.warn("接收到空消息");
          return;
        }

        let data;
        try {
          data = JSON.parse(res.data);
        } catch (parseError) {
          console.error("解析WebSocket消息失败:", parseError, res.data);
          return;
        }

        if (!data) {
          console.warn("解析后消息为空");
          return;
        }

        // 处理新的私信消息
        if (data.command === "newIdleChatMessage") {
          console.log(
            "收到新私信消息:",
            data,
            "- 时间:",
            new Date().toISOString()
          );
          handleNewChatMessage(data);
        }
      } catch (error) {
        console.error("WebSocket消息处理主流程异常:", error);
      }
    });

    // 监听WebSocket错误事件
    socketTask.value.onError((err) => {
      console.error("WebSocket错误:", err);
      handleWebSocketError(err);
      isConnecting.value = false; // 出错时重置连接中状态
    });

    // 监听WebSocket关闭事件
    socketTask.value.onClose(() => {
      console.log("WebSocket连接已关闭 - 当前时间:", new Date().toISOString());
      isConnected.value = false;
      isConnecting.value = false; // 连接关闭，重置连接中状态
      handleWebSocketClose();
    });
  } catch (error) {
    console.error("创建WebSocket连接失败:", error);
    handleWebSocketError(error);
    isConnecting.value = false; // 出现异常，重置连接中状态
  }
};

// 处理WebSocket错误
const handleWebSocketError = (err) => {
  isConnected.value = false;
  // 只有在页面可见时才尝试重连
  if (isPageVisible.value) {
    attemptReconnect();
  } else {
    console.log("页面不可见，不进行重连");
  }
};

// 处理WebSocket关闭
const handleWebSocketClose = () => {
  isConnected.value = false;
  // 只有在页面可见时才尝试重连
  if (isPageVisible.value) {
    attemptReconnect();
  } else {
    console.log("页面不可见，不进行重连");
  }
};

// 尝试重连
const attemptReconnect = () => {
  // 如果页面不可见，不进行重连
  if (!isPageVisible.value) {
    console.log("页面不可见，不进行重连");
    return;
  }

  if (reconnectCount.value >= MAX_RECONNECT_COUNT) {
    console.log("达到最大重连次数，停止重连");
    return;
  }

  if (reconnectTimer.value) {
    clearTimeout(reconnectTimer.value);
  }

  reconnectCount.value++;
  const delay = Math.min(
    RECONNECT_DELAY * Math.pow(1.5, reconnectCount.value - 1),
    30000
  ); // 指数退避，最大30秒

  console.log(`计划在 ${delay}ms 后进行第 ${reconnectCount.value} 次重连`);
  reconnectTimer.value = setTimeout(() => {
    if (!isConnected.value && isPageVisible.value) {
      console.log(`正在进行第 ${reconnectCount.value} 次重连...`);
      connectWebSocket();
    }
  }, delay);
};

// 关闭WebSocket连接
const closeWebSocketConnection = () => {
  console.log("执行关闭WebSocket连接函数");

  // 清除重连定时器
  if (reconnectTimer.value) {
    clearTimeout(reconnectTimer.value);
    reconnectTimer.value = null;
  }

  // 如果正在连接中，等待一小段时间后再关闭，避免连接刚建立就关闭
  if (isConnecting.value && !isConnected.value) {
    console.log("WebSocket正在连接中，延迟关闭");
    setTimeout(() => {
      closeWebSocketActual();
    }, 300);
  } else {
    closeWebSocketActual();
  }
};

// 实际关闭WebSocket连接的函数
const closeWebSocketActual = () => {
  // 关闭WebSocket连接
  if (socketTask.value) {
    try {
      socketTask.value.close({
        success: () => {
          console.log("关闭WebSocket连接成功");
        },
        fail: (err) => {
          console.error("关闭WebSocket连接失败:", err);
        },
        complete: () => {
          socketTask.value = null;
        },
      });
    } catch (error) {
      console.error("关闭WebSocket连接出错:", error);
      socketTask.value = null;
    }
  }

  isConnected.value = false;
  isConnecting.value = false; // 确保连接中状态重置
};

// 处理WebSocket接收到的新私信消息
const handleNewChatMessage = (data) => {
  try {
    // 如果页面不可见，不处理消息
    if (!isPageVisible.value) {
      console.log("页面不可见，不处理新消息");
      return;
    }

    if (!data) {
      console.warn("接收到空消息对象");
      return;
    }

    if (!data.senderUserName) {
      console.warn("消息中无发送者用户名:", data);
      return;
    }

    // 创建消息指纹，用于去重
    const messageFingerprint = `${data.senderUserName}_${data.preview || ""}_${
      data.userId || ""
    }`;

    // 检查是否是重复消息（时间间隔小于2秒的相同内容消息）
    const now = Date.now();
    if (
      _lastProcessedMessage.content === messageFingerprint &&
      now - _lastProcessedMessage.time < 2000
    ) {
      console.log("短时间内收到重复消息，跳过处理:", messageFingerprint);
      return;
    }

    // 更新最近处理的消息
    _lastProcessedMessage.content = messageFingerprint;
    _lastProcessedMessage.time = now;

    console.log("处理新私信消息:", data);

    // 使用消息ID作为唯一标识
    const messageId = (data.userId || "unknown") + "_" + Date.now();

    // 检查是否已处理过该消息，避免重复处理
    if (_processedMessages.includes(messageId)) {
      console.log("消息已处理，跳过:", messageId);
      return;
    }

    // 记录已处理的消息
    _processedMessages.push(messageId);

    // 限制已处理消息列表长度，避免内存泄漏
    if (_processedMessages.length > 100) {
      _processedMessages.splice(0, _processedMessages.length - 50);
    }

    // 更新总未读消息数量
    totalUnreadCount.value += 1;

    // 检查消息列表中是否已有该发送者
    const existingMessageIndex = messages.value.findIndex(
      (msg) => msg.receiverUserName === data.senderUserName
    );

    if (existingMessageIndex !== -1) {
      // 更新现有消息项
      const existingMessage = messages.value[existingMessageIndex];
      const newUnreadCount = (existingMessage.unreadCount || 0) + 1;

      // 创建更新后的消息对象
      const updatedMessage = {
        ...existingMessage,
        preview: data.preview, // 更新预览内容
        time: new Date().toISOString(), // 更新时间为当前时间
        hasUnread: true,
        unreadCount: newUnreadCount,
      };

      // 更新消息列表，将该消息移到顶部
      const updatedMessages = [...messages.value];
      updatedMessages.splice(existingMessageIndex, 1); // 移除原有消息
      updatedMessages.unshift(updatedMessage); // 添加到顶部
      messages.value = updatedMessages;
    } else {
      // 刷新消息列表以获取完整数据
      loadMessages();
      return;
    }

    // 添加到未读消息列表
    let found = false;
    for (const item of unreadUsers.value) {
      if (item.senderUserName === data.senderUserName) {
        found = true;
        break;
      }
    }

    if (!found) {
      unreadUsers.value.push({
        senderUserName: data.senderUserName,
        senderAvatar: data.senderAvatar || "",
        preview: data.preview || "",
      });
    }

    // 通知用户有新消息
    notifyUser(data);
  } catch (error) {
    console.error("处理新消息时发生异常:", error);
  }
};

// 通知用户有新消息
const notifyUser = (data) => {
  try {
    // 如果页面不可见，不进行通知
    if (!isPageVisible.value) {
      console.log("页面不可见，不进行通知");
      return;
    }

    if (!data || !data.senderUserName) {
      console.warn("通知中无发送者信息");
      return;
    }

    // 平台相关的震动功能，只在APP环境下使用
    // #ifdef APP-PLUS
    try {
      uni.vibrateShort({
        success: () => {
          console.log("震动成功");
        },
        fail: (error) => {
          console.log("震动失败:", error);
        },
      });
    } catch (error) {
      console.log("调用震动API失败:", error);
    }
    // #endif

    // 显示通知
    try {
      // uni.showToast({
      //   title: `收到${data.senderUserName}的新消息`,
      //   icon: "none",
      //   duration: 2000,
      // });
    } catch (error) {
      console.log("显示通知失败:", error);
    }
  } catch (error) {
    console.error("通知用户时发生异常:", error);
  }
};

// 获取聊天室入口位置信息
const getChatroomEntryPosition = () => {
  const query = uni.createSelectorQuery().in(this);
  query
    .select(".chatroom-entry")
    .boundingClientRect((data) => {
      if (data) {
        chatroomEntryPosition.value = data;
      }
    })
    .exec();
};

// 滚动事件处理
const onScroll = (e) => {
  // 获取当前滚动位置
  const scrollPosition = e.detail.scrollTop;

  // 如果滚动位置超过聊天室入口高度，显示浮动入口
  if (
    chatroomEntryPosition.value &&
    scrollPosition > chatroomEntryPosition.value.height
  ) {
    showFloatingChatroom.value = true;
  } else {
    showFloatingChatroom.value = false;
  }
};

// 加载当前用户信息
const loadCurrentUser = async () => {
  try {
    const res = await api.user.getCurrentUser();
    if (res.code === 0) {
      currentUser.value = res.data;
    }
  } catch (error) {
    console.error("获取用户信息失败:", error);
  }
};

// 加载聊天室历史消息
const loadChatroomMessages = async () => {
  try {
    const res = await api.chat.getMessages(page.value);
    if (res && res.data && res.data.length > 0) {
      // 获取最新的一条消息
      latestChatMessage.value = res.data[0];
    }
  } catch (error) {
    console.error("获取聊天室消息失败:", error);
  }
};

// 加载消息列表
const loadMessages = async () => {
  if (loading.value || !hasMore.value) return;

  try {
    loading.value = true;
    //showLoading("加载中");

    const res = await api.chat.getMessageList();
    if (res.result === 0) {
      // 先检查未读消息状态
      await checkUnreadMessages();

      // 处理消息数据，添加未读状态
      const processedMessages = (res.data || []).map((msg) => {
        // 检查该消息是否有未读消息 - 根据用户名匹配
        const userUnreadMessages = unreadUsers.value.filter(
          (unread) => unread.senderUserName === msg.receiverUserName
        );

        // 计算该用户的未读消息数量
        const unreadCount = userUnreadMessages.length;

        return {
          ...msg,
          // 添加未读状态标记和未读数量
          hasUnread: unreadCount > 0,
          unreadCount: unreadCount,
        };
      });

      messages.value = processedMessages;
    } else {
      showError(res.msg || "获取消息列表失败");
    }
  } catch (error) {
    showError(error.message || "获取消息列表失败");
  } finally {
    loading.value = false;
    hideLoading();
  }
};

// 加载更多消息
const loadMore = () => {
  if (hasMore.value) {
    loadMessages();
  }
};

// 判断是否为自己发送的消息
const isSelfSender = (message) => {
  if (!currentUser.value) return false;
  return message.fromId === currentUser.value.oId;
};

// 格式化消息预览
const formatPreview = (preview) => {
  if (!preview) return "";

  // 检测是否为红包格式的JSON数据
  try {
    if (preview.includes('"msgType"')) {
      const msgData = JSON.parse(preview);

      // 处理红包消息
      if (msgData.msgType === "redPacket") {
        return `[红包] ${msgData.msg || "恭喜发财，大吉大利"}`;
      }

      // 处理音乐消息
      if (msgData.msgType === "music") {
        return `[音乐] ${msgData.title || "分享了一首歌"}`;
      }

      // 处理天气消息
      if (msgData.msgType === "weather") {
        return `[天气] ${msgData.t || ""} ${msgData.st || ""}`;
      }
    }
  } catch (e) {
    // JSON解析失败，不是有效的JSON，继续处理其他格式
    console.log("消息格式解析失败", e);
  }

  // 检查是否包含图片标签
  if (preview.includes("<img") && preview.includes("src=")) {
    return "[图片]";
  }

  // 检查<p>标签内是否只有图片 - 针对示例格式 <p><img src="..."></p>
  if (/^<p>\s*<img[^>]+>\s*<\/p>$/.test(preview)) {
    return "[图片]";
  }

  // 移除blockquote引用块内容
  if (preview.includes("<blockquote>")) {
    // 使用正则表达式移除blockquote及其内容
    preview = preview.replace(/<blockquote>[\s\S]*?<\/blockquote>/g, "");
  }

  // 如果是HTML内容，去除HTML标签
  if (preview.includes("<") && preview.includes(">")) {
    preview = preview.replace(/<[^>]+>/g, "");
  }

  // 如果包含Markdown链接，简化显示
  if (preview.includes("](")) {
    preview = preview.replace(/\[([^\]]+)\]\([^\)]+\)/g, "$1");
  }

  // 限制长度，根据内容类型使用不同的长度限制
  const maxLength =
    preview.includes("图片") ||
    preview.includes("红包") ||
    preview.includes("音乐") ||
    preview.includes("天气")
      ? 15
      : 30;
  if (preview.length > maxLength) {
    return preview.substring(0, maxLength) + "...";
  }

  return preview;
};

// 格式化时间
const formatTime = (timeStr) => {
  if (!timeStr) return "";

  const now = new Date();
  const messageTime = new Date(timeStr);
  const diffDays = Math.floor((now - messageTime) / (24 * 60 * 60 * 1000));
  const diffYears = now.getFullYear() - messageTime.getFullYear();

  if (diffDays === 0) {
    // 今天，显示时:分
    return timeStr.slice(11, 16);
  } else if (diffDays === 1) {
    // 昨天
    return "昨天";
  } else if (diffDays < 7) {
    // 一周内，显示星期几
    const weekdays = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
    return weekdays[messageTime.getDay()];
  } else if (diffYears >= 1) {
    // 超过一年，显示年/月/日
    return `${messageTime.getFullYear()}/${
      messageTime.getMonth() + 1
    }/${messageTime.getDate()}`;
  } else {
    // 超过一周但不到一年，显示月/日
    return `${messageTime.getMonth() + 1}/${messageTime.getDate()}`;
  }
};

// 跳转到聊天室
const goToChatroom = () => {
  uni.navigateTo({
    url: "/pages/chat/new-chat/index",
  });
};

// 跳转到聊天详情页并标记已读
const goToChatDetail = async (message) => {
  // 获取与当前用户聊天的用户名
  const toUserName = message.receiverUserName;

  // 标记该用户的消息为已读
  if (message.hasUnread) {
    try {
      // API传递的应该是fromUser，即发送给自己消息的用户名
      await api.chat.readMessage(toUserName);

      // 更新消息列表中该用户的未读状态
      const updatedMessages = messages.value.map((msg) => {
        if (msg.receiverUserName === toUserName) {
          return { ...msg, hasUnread: false, unreadCount: 0 };
        }
        return msg;
      });
      messages.value = updatedMessages;

      // 更新未读消息列表
      const previousUnreadCount = unreadUsers.value.filter(
        (unread) => unread.senderUserName === toUserName
      ).length;

      unreadUsers.value = unreadUsers.value.filter(
        (unread) => unread.senderUserName !== toUserName
      );

      // 更新总未读消息数量
      totalUnreadCount.value = Math.max(
        0,
        totalUnreadCount.value - previousUnreadCount
      );
    } catch (error) {
      console.error("标记消息已读失败:", error);
    }
  }

  uni.navigateTo({
    url: `/pages/chat/chat-detail?username=${toUserName}`,
  });
};

// 下拉刷新处理函数
const onRefresh = async () => {
  if (isRefreshing.value) return;

  try {
    isRefreshing.value = true;
    // 重置页码
    page.value = 1;
    // 重新加载消息列表和聊天室消息以及未读状态
    await Promise.all([
      loadMessages(),
      loadChatroomMessages(),
      checkUnreadMessages(),
    ]);
  } catch (error) {
    console.error("刷新失败:", error);
    showError("刷新失败，请重试");
  } finally {
    isRefreshing.value = false;
  }
};

// 检查未读消息
const checkUnreadMessages = async () => {
  try {
    const res = await api.chat.getUnreadMessage();
    if (res && res.result >= 0 && res.data) {
      // 保存未读消息列表
      unreadUsers.value = res.data;
      // 记录总未读数量（res.result 表示未读消息总数）
      totalUnreadCount.value = res.result;

      // 更新消息列表的未读状态
      updateMessagesUnreadStatus();
    }
  } catch (error) {
    console.error("获取未读消息状态失败:", error);
  }
};

// 更新消息列表中的未读状态
const updateMessagesUnreadStatus = () => {
  if (messages.value.length === 0 || unreadUsers.value.length === 0) return;

  const updatedMessages = messages.value.map((msg) => {
    // 查找该用户的未读消息
    const userUnreadMessages = unreadUsers.value.filter(
      (unread) => unread.senderUserName === msg.receiverUserName
    );

    // 计算该用户的未读消息数量
    const unreadCount = userUnreadMessages.length;

    return {
      ...msg,
      hasUnread: unreadCount > 0,
      unreadCount: unreadCount,
    };
  });

  messages.value = updatedMessages;
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f6f7;
}

.header {
  padding: 20rpx 30rpx;
  background-color: #ffffff;
  border-bottom: 1rpx solid #eeeeee;
  position: relative;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  position: sticky;
  top: 0;
  z-index: 100;
  padding-top: 50rpx;
}

.title {
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
}

.unread-count {
  font-size: 28rpx;
  color: #ff4d4f;
  margin-left: 8rpx;
}

.message-list {
  flex: 1;
  overflow: hidden;
}

.chatroom-entry,
.message-item {
  display: flex;
  padding: 24rpx 30rpx;
  background-color: #ffffff;
  border-bottom: 1rpx solid #f0f0f0;
  position: relative;
}

.chatroom-entry:active,
.message-item:active {
  background-color: #f9f9f9;
}

.floating-chatroom {
  position: fixed;
  top: -100%;
  left: 0;
  right: 0;
  display: flex;
  padding: 24rpx 30rpx;
  background-color: #ffffff;
  z-index: 99;
  border-bottom: 1rpx solid #f0f0f0;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  transition: top 0.3s ease-in-out;
}

.show-floating {
  top: 150rpx;
}

.floating-chatroom:active {
  background-color: #f9f9f9;
}

.floating-chatroom .avatar {
  width: 90rpx;
  height: 90rpx;
}

.floating-chatroom .name {
  font-size: 28rpx;
  font-weight: 500;
}

.divider {
  height: 20rpx;
  background-color: #f5f6f7;
}

.section-title {
  padding: 20rpx 30rpx;
  font-size: 28rpx;
  color: #666;
  background-color: #f5f6f7;
}

.avatar-container {
  margin-right: 20rpx;
  position: relative;
  display: flex;
  align-items: center;
}

.avatar {
  width: 90rpx;
  height: 90rpx;
  border-radius: 50%;
  background-color: #eee;
  border: 1rpx solid #f0f0f0;
}

/* 未读消息红点样式 */
.unread-dot {
  position: absolute;
  top: 0;
  right: 0;
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
  background-color: #ff4d4f;
  border: 2rpx solid #fff;
}

.message-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

.name-area {
  display: flex;
  align-items: center;
  margin-bottom: 8rpx;
}

.name {
  font-size: 32rpx;
  color: #333;
  font-weight: 500;
  margin-right: 12rpx;
}

.device-info {
  font-size: 22rpx;
  color: #999;
  background-color: #f5f5f5;
  padding: 2rpx 10rpx;
  border-radius: 10rpx;
}
.online-info {
  font-size: 22rpx;
  color: #ffffff;
  background-color: #4caf50;
  padding: 2rpx 10rpx;
  border-radius: 10rpx;
}
.time-container {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  min-width: 80rpx;
}

.time {
  font-size: 24rpx;
  color: #999;
  margin-bottom: 10rpx;
}

.badge {
  background-color: #ff4d4f;
  color: #fff;
  font-size: 22rpx;
  border-radius: 24rpx;
  min-width: 36rpx;
  height: 36rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10rpx;
}

.message-preview-container {
  font-size: 28rpx;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  max-width: 100%;
}

.message-preview-text {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sender-prefix {
  color: #999;
  margin-right: 4rpx;
  flex-shrink: 0;
}

.empty-list {
  padding: 60rpx 0;
  text-align: center;
  color: #999;
  font-size: 28rpx;
}

.loading {
  padding: 30rpx 0;
  text-align: center;
  color: #999;
  font-size: 26rpx;
}
</style>
